<!doctype html>
<html onselectstart='return false'>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<style type="text/css">
*{ margin:0px;
padding:0px;}
body{ background:#000000;}
#wrap{width:120px;
height:auto;
margin:300px auto;
position:relative;
transform-style:preserve-3d;
transform:perspective(800px) rotateX(-10deg) rotatey(0deg);
-moz-transform:perspective(800px) rotateX(-10deg) rotatey(0deg);
-ms-transform:perspective(800px) rotateX(-10deg) rotatey(0deg);
-o-transform:perspective(800px) rotateX(-10deg) rotatey(0deg);
-webkit-transform:perspective(800px) rotateX(-10deg) rotatey(0deg);}
#wrap img{width:100%;
height:auto;
position:absolute;
top:0px;
left:0px;
border-radius:5px;
box-shadow:0px 0px 10px #FFFFFF;
-webkit-box-reflect:below 8px -webkit-linear-gradient(top,rgba(0,0,0,0)50%,rgba(0,0,0,0.50)100%);
transition:all 0.5s;
-moz-transition:all 0.5s;
-ms-transition:all 0.5s;
-o-transition:all 0.5s;
-webkit-transition:all 0.5s;}
</style>
</head>
<body bgcolor="#000000">
<div id="wrap">
	<img src="img/1.jpg">
    <img src="img/2.jpg">
    <img src="img/3.jpg">
    <img src="img/4.jpg">
    <img src="img/5.jpg">
    <img src="img/6.jpg">
    <img src="img/7.jpg">
    <img src="img/8.jpg">
    <img src="img/9.jpg">
</div>
<script src="js/jquery-2.1.4.js"></script>
<script>
	$(function(){
		var imgl=$("#wrap img").size();
		var Deg = 360/imgl;
		var roY = 0,roX = -10,xN,yN,play=null;
		$("#wrap img").each(function(i) {
            $(this).css({'transform':'rotateY('+i*Deg+'deg) translateZ(300px)','-moz-transform':'rotateY('+i*Deg+'deg) translateZ(300px)','-ms-transform':'rotateY('+i*Deg+'deg) translateZ(300px)','-o-transform':'rotateY('+i*Deg+'deg) translateZ(300px)','-webkit-transform':'rotateY('+i*Deg+'deg) translateZ(300px)',})
			$(this).attr("ondragstart","return false");
        });
		$(document).mousedown(function(ev){
			/*clearInterval(play);*/
				var x_ = ev.clientX;
				var y_ = ev.clientY;
		 	$(this).bind('mousemove',function(ev){
				var x = ev.clientX;
				var y = ev.clientY;
				
				xN = x - x_;
				yN = y - y_;
				roY += xN*0.2;
				roX -= yN*0.07;
				$('#wrap').css({'transform':'perspective(800px) rotateX('+roX+'deg) rotatey('+roY+'deg)','-moz-transform':'perspective(800px) rotateX('+roX+'deg) rotatey('+roY+'deg)','-ms-transform':'perspective(800px) rotateX('+roX+'deg) rotatey('+roY+'deg)','-o-transform':'perspective(800px) rotateX('+roX+'deg) rotatey('+roY+'deg)','-webkit-transform':'perspective(800px) rotateX('+roX+'deg) rotatey('+roY+'deg)',})
				//$(document.body).append('<div style="width:5px; height:5px; background:#FF0004;position:absolute;top:'+y+'px;left:'+x+'px;"></div>')
				x_ = ev.clientX;
				y_ = ev.clientY;
			})
		}).mouseup(function(){
			$(this).unbind("mousemove")
			/*play = setInterval(function(){
				xN = xN * 0.95;
				if(Math.abs(yN)<= 0.5){
					clearInterval(play);
					}
				roY += xN*0.2;
				roX -= yN*0.07;
				$('#wrap').css('transform','perspective(800px) rotateX('+roX+'deg) rotatey('+roY+'deg)');
				},30)*/
			})
	})
</script>
</body>
</html>
